<script setup>
import * as echarts from "echarts"; // 引入echarts 核心模块
import { ref, onMounted } from "vue";

var chart = ref(); // 创建dom引用

onMounted(() => {
  // 基于准备好的dom，初始化echarts 实例
  var myChart = echarts.init(chart.value);

  // 指定图表的配置项和数据
  var option = {
    title: {
      // 标题
      text: "Echarts 入门",
    },
    legend: {
      // 图例
      data: ["销量"],
    },
    xAxis: {
      // x轴
      data: [
        "衬衫一",
        "羊毛衫2",
        "羊毛衫42",
        "羊毛衫32",
        "羊毛衫12",
        "羊毛衫26",
      ],
    },
    yAxis: {
      // y轴
    },
    series: [
      {
        name: "销量",
        type: "bar", // 图表类型. bar 柱状图
        data: [1, 2, 3, 4, 50, 6], // 图表系列住的数据
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表
  myChart.setOption(option);
});
</script>

<template>
  <div>
    <!--  为echarts 准备一个定义了高度宽度的容器 -->
    <div ref="chart" style="width: 1000px; height: 400px"></div>
  </div>
</template>

<style scoped>
</style>
